<template>
  <div class="excel-container">
    <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
import { batchEmployee, getEmployeeList } from '@/api'
import { formatExcelDate } from '@/utils'
export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    beforeUpload(file) {
      // 这个函数必须 return 一个布尔值 并且只有 return 出去的是 true 的时候才会执行后续的解析 excel 的操作
      // 如果 reture false，表示校验不通过，不会进行正式的解析操作
      console.log('上传前', file)
      // 文件大小超过 1M 不允许导入
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      return false
    },
    // 导出功能
    async exportExcel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 调用员工列表接口，获取要导出的员工列表
        const res = await getEmployeeList(this.params)
        // 数据转换
        // 表头
        const headerArr = ['姓名', '手机号', '入职日期', '工号', '聘用形式', '部门']
        // 中英对照关系
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        // 根据员工列表数据、表头、中英文对应关系，将数据转换成二维数组
        const twoArr = getExportData(res.data.rows, headerArr, headerRelation)
        // 导出
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          header: headerArr,
          // 表格 body 具体数据，是一个二维数组
          data: twoArr,
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
      // 导出excel数据处理
      const newArr = []
      function getExportData(rows, headerArr, headerRelation) {
        // 格式为[[]]
        // rows 决定有多少行，也就是二维数组中有多少个小数组
        // headerArr 决定有多少列，每个小数组中有多少项S
        rows.forEach(item => {
          const oneArr = []
          // 每一项的中文key进行遍历      与英文的enkey进行对照匹配
          headerArr.forEach(key => {
            const enkey = headerRelation[key]
            if (enkey === 'formOfEmployment') {
              oneArr.push(this.hireMap[+item[enkey]] || '未知')
            } else {
              // 放在子数组里
              oneArr.push(item[enkey])
            }
          })
          // 再把放到大数组里return出来
          newArr.push(oneArr)
        })
        return newArr
      }
    },
    async onSuccess({ results, header }) {
      // results：表体数据
      // header：表头数据
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '转正日期': 'correctionTime'
      }
      // 将解析出来的 excel 数据中的表体数据的的 key 换成英文
      const data = this.getImportData(results, headerRelation)
      console.log(this.getImportData(results, headerRelation))
      await batchEmployee(data)
      this.$router.go(-1)
    },
    // 导入excel表格处理
    // 转换数组中的每一项的对象的 key 值的方法
    getImportData(results, headerRelation) {
      const arr = []
      // 将所有的中文 key 转换成英文 key，然后添加到新数组中
      results.forEach(item => {
        const obj = {}
        Object.keys(item).forEach(child => {
          if (['timeOfEntry', 'correctionTime'].includes(headerRelation[child])) {
            obj[headerRelation[child]] = formatExcelDate(item[child], '-')
          } else {
            obj[headerRelation[child]] = item[child]
          }
          console.log('英文的key是' + headerRelation[child], '中文的是:' + item[child])
        })
        arr.push(obj)
      })
      return arr
    }
  }
}

</script>
